<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件嵌套</title>
</head>
<body>
    <div id="app">
        <app></app>
    </div>

<script src="/js/vue.js"></script>
<script type="text/javascript">
  //定义student组件
  const student={
    template:`
      <div>
      <h3>学生信息</h3>
      <p>姓名:{{name}}</p>
      <p>年龄:{{age}}</p>
      </div>
    `,
    data(){
      return{
        name:"张三",
        age:18
      }
    }
  }

  //定义school组件并将student组件进行局部嵌套到school组建中
  const school={
    template:`
      <div>
      <h3>学校信息</h3>
      <p>名称:{{name}}</p>
      <p>地址:{{address}}</p>
      <student></student>
      </div>
    `,
    data(){
      return{
        name:"尚硅谷",
        address:"北京昌平"
      }
    },
    //局部注册
    components:{
      student
    }
  }

    //创建一个app组件管理所有的组件
  const app={
      template:`
      <div>
      <h1>{{msg}}</h1>
      <school></school>
      </div>
      `,
      components: {
          school
      },
      data(){
          return{
              msg:"vue-渐进式的JavaScript框架"
          }
      }
  }

  //创建vm实例
  new Vue({
    el:"#app",
    data(){
      return{

      }
    },
    components: {
        app
    }
  })
</script>
</body>
</html>
